<template>
  <div>
    <Echart
      id="centreLeft3Chart"
      ref="centreLeft3ChartRef"
      :options="options"
      height="244px"
      width="472px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';
import { isNotEmpty } from '@/utils'
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  watch: {
    cdata: {
      handler(newData){
        if(isNotEmpty(newData)){
          this.getData(newData)
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getData(v){
      const { xData, lineSeriesData, barSeriesData } = v;
      // 将柱状图和折线图数据合并到 series 数组中（保持柱状图在前，折线图在后）
      const allSeries = [...barSeriesData, ...lineSeriesData];

      this.options = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#083264',
          textStyle: {
            fontFamily: 'PingFang SC, PingFang SC',
            fontWeight: '500',
            fontSize: 11,
            color: '#fff',
            borderColor: '#041432'
          },
          axisPointer: {
            type: 'cross',
            label: {
              show: true,
              textStyle: {
                fontFamily: 'PingFang SC, PingFang SC',
                fontWeight: '500',
                fontSize: 11,
                color: '#083264'
              }
            }
          },
          formatter: function (params) {
            // 显示当前 x 轴标签作为标题
            let header = `<div style="margin-bottom: 4px;">${params[0].axisValueLabel}</div>`;
            let body = params
                .map(item => {
                  // 判断如果为折线图，则在数值后添加百分号
                  let value = item.seriesType === 'line' ? item.data + '%' : item.data;
                  // 使用 item.marker 显示系列颜色的圆点
                  return `
            <div style="display: flex; justify-content: space-between; padding: 2px 0;">
              <div style="display: flex; align-items: center;">
                ${item.marker}
                <span style="margin-left: 4px;">${item.seriesName}：</span>
              </div>
              <span style="text-align: right;">${value}</span>
            </div>`;
                })
                .join('');
            return header + body;
          }
        },
        legend: {
          data: ['警情总量', '上一周期', '去年同期', '去年同期', '同比','环比'],
          top: 12,
          itemWidth: 10,
          itemHeight: 4,
          textStyle: {
            fontFamily: 'PingFang SC, PingFang SC',
            fontWeight: '500',
            fontSize: 11,
            color: '#A7C5D9'
          }
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFang SC, PingFang SC',
              fontWeight: '500',
              fontSize: 11,
              color: '#A7C5D9'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFang SC, PingFang SC',
              fontWeight: '500',
              fontSize: 11,
              color: '#A7C5D9'
            }
          }
        },
        series: allSeries,
        grid: {
          top: '20px',
          bottom: '30px'
        }
      };
    }
  },
};
</script>
